﻿@page "/tables/header"

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["Desc"]</h4>

<p>@((MarkupString)Localizer["DescP"].Value)</p>

<DemoBlock Title="@Localizer["FixedHeaderTitle"]" Introduction="@Localizer["FixedHeaderIntro"]" Name="FixedHeader">
    <p>@Localizer["FixedHeaderP"]</p>
    <p>@Localizer["FixedHeaderP1"]</p>
    <Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" Height="200" IsBordered="true" IsFixedHeader="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["FixedWidthTitle"]" Introduction="@Localizer["FixedWidthIntro"]" Name="FixedWidth">
    <p>@Localizer["FixedWidthP"]</p>
    <Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" IsBordered="true" IsMultipleSelect="true" Height="200" IsFixedHeader="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["AllowResizingTitle"]" Introduction="@Localizer["AllowResizingIntro"]" Name="AllowResizing">
    <p>@((MarkupString)Localizer["AllowResizingP"].Value)</p>
    <Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table"
           IsBordered="true" IsMultipleSelect="true" IsPagination="true" IsFixedHeader="true"
           Height="200" AllowResizing="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" Width="900" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["AutoHeightTitle"]" Introduction="@Localizer["AutoHeightIntro"]" Name="AutoHeight">
    <p>@((MarkupString)Localizer["AutoHeightP"].Value)</p>
    <div style="height: 300px;">
        <Table TItem="Foo" Items="@Items.Take(10)" RenderMode="TableRenderMode.Table" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false"
               IsBordered="true" IsMultipleSelect="true" IsPagination="true" IsFixedHeader="true" AllowResizing="true">
            <TableColumns>
                <TableColumn @bind-Field="@context.DateTime" Width="180" />
                <TableColumn @bind-Field="@context.Name" Width="100" />
                <TableColumn @bind-Field="@context.Address" Width="900" />
            </TableColumns>
        </Table>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["DialogTitle"]" Introduction="@Localizer["DialogIntro"]" Name="Dialog">
    <p>@((MarkupString)Localizer["DialogDesc"].Value)</p>
    <Pre>&lt;style&gt;
    .dialog-table .modal-body {
        height: calc(100vh - 400px);
        overflow: hidden;
    }
&lt;/style&gt;</Pre>
    <Button Text="@Localizer["DialogButtonText"]" OnClick="OnClickDialog" />
</DemoBlock>

<style>
    .dialog-table .modal-body  {
        height: calc(100vh - 400px);
        overflow: hidden;
    }
</style>

@code {
    RenderFragment RenderTable() =>
    @<Table TItem="Foo" Items="@Items" ShowColumnList="true" ShowToolbar="true" ShowDefaultButtons="false" ShowRefresh="false"
       IsBordered="true" IsMultipleSelect="true" IsPagination="true" IsFixedHeader="true" AllowResizing="true" RenderMode="TableRenderMode.Table">
            <TableColumns>
                <TableColumn @bind-Field="@context.DateTime" Width="180" />
                <TableColumn @bind-Field="@context.Name" Width="100" />
                <TableColumn @bind-Field="@context.Address" Width="900" />
            </TableColumns>
    </Table>;
}
